<template>
<div class="cart">
  <!-- 导航栏区域 -->
  <van-nav-bar title="购物车" left-arrow @click-left="onBack">
    <template #right>
      <van-icon name="ellipsis" />
    </template>
  </van-nav-bar>

  <!-- 展示购物车区域 -->
  <div>
    <van-swipe-cell v-for="(item, index) in items" :key="index">
      <!-- {{ item }} -->
      <div class="item">
        <van-checkbox v-model="item.isChecked" @click="singleChecked(index)"></van-checkbox>
        <van-card :num="item.num" :price="item.price" :title="item.title" class="goods-card" thumb="https://img01.yzcdn.cn/vant/cat.jpeg">
          <template #footer>
            <van-stepper v-model="item.num" @change="itemNumChange" />
          </template>
        </van-card>
      </div>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="delItem(index)" />
      </template>
    </van-swipe-cell>
  </div>
  <!-- 提交订单 -->
  <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="allChecked" @click="allCheckedChange">全选</van-checkbox>
  </van-submit-bar>
  <tabbar></tabbar>
</div>
</template>

<script>
// 引入想要使用的组件
import tabbar from "../../components//myTabbar/index.vue";
// vux 助手函数
import { mapState, mapMutations } from "vuex";
import { Dialog } from "vant";
export default {
  data() {
    return {
      // 复选框的值
      checked: true,
      // 步进器的值
      value: 1,
    };
  },
  components: {
    tabbar,
  },
  // 利用计算属性来获取有可能变化的数据/state
  computed: {
    ...mapState({
      items: (state) => {
        return JSON.parse(JSON.stringify(state.cart.items));
      },
      total: (state) => state.cart.total,
    }),
    // 不通过mapState
    allChecked: {
      get() {
        // 直接拿到数据
        return this.$store.state.cart.allChecked;
      },
      set() {},
    },
  },
  mounted() {
    this.set_total();
  },
  methods: {
    onBack() {
      this.$router.back(-1);
    },
    onSubmit() {
      alert("提交订单");
    },
    // 解构
    ...mapMutations("cart", [
      "del_item",
      "set_items",
      "set_total",
      "set_allChecked",
      "set_checked",
      "set_item_checked",
    ]),
    // 删除当前商品
    delItem(index) {
      // console.log('del');
      // this.del_item(index)
      Dialog.confirm({
        title: "删除商品",
        message: "sure?",
      })
        .then(() => {
          this.del_item(index);
        })
        .catch(() => {
          console.log("try");
        });
    },
    // 步进器的方法
    itemNumChange() {
      // console.log(this.items);
      this.set_items(this.items);
      this.set_total();
    },
    // 全选按钮的方法
    allCheckedChange() {
      // console.log(this.allChecked);
      this.set_allChecked(!this.allChecked);
      this.set_checked(this.allChecked);
      this.set_total();
    },
    // 单选按钮的方法
    singleChecked(index) {
      // console.log(index);
      // console.log(this.items[index].isChecked);
      this.set_item_checked({
        index,
        checked: this.items[index].isChecked,
      });
      this.set_total();
      const allChecked = this.items.every((item) => item.isChecked);
      this.set_allChecked(allChecked);
    },
  },
};
</script>

<style scoped>
.goods-card {
  margin: 0;
  flex: 1;
  background-color: #fafafa;
}

.delete-button {
  height: 100%;
}

.item {
  display: flex;
}

.van-submit-bar {
  margin-bottom: 45px;
}
</style>
